<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
    <title>运动的小球</title>
</head>
<body>
参考：<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Advanced_animations</a>
<p></p>
<canvas id="canvas"></canvas>

<div>
    <p>配置：</p>
    <div>
        <div>小球坐标</div>

        <span>x：</span><input id="xInput" type="number"/>
        <div></div>
        <span>y：</span><input id="yInput" type="number"/>
    </div>
    <p></p>
    <div>
        <span>x速度</span><input id="xVInput" type="number"/>
        <span>y速度</span><input id="yVInput" type="number"/>
    </div>
    <p></p>

    <div>
        <span>x加速度</span><input id="xAVInput" type="number"/>
        <span>y加速度</span><input id="yAVInput" type="number"/>
    </div>

    <p></p>
    <div>
        <span>长尾效果：</span>
        <input type="checkbox" id="longTailInput"/>
    </div>

    <p></p>
    <button onclick="okConfClick(event)">确定</button>
    <button onclick="startRunClick(event)">开始</button>
    <button onclick="pauseRunClick(event)">暂停</button>

</div>

</div>
<script>

    var longTailInput = document.getElementById("longTailInput");
    var xInput = document.getElementById("xInput");
    var yInput = document.getElementById("yInput");

    var xVInput = document.getElementById("xVInput");
    var yVInput = document.getElementById("yVInput");
    var xAVInput = document.getElementById("xAVInput");
    var yAVInput = document.getElementById("yAVInput");


    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var raf;
    var isRuning = false;
    var rect = (function () {
        function Rect(l, r, t, b) {
            this.l = l;
            this.r = r;
            this.t = t;
            this.b = b;
        }

        Rect.prototype.isContain = function (x, y) {
            return (x >= this.l && x <= this.r && y >= this.t && y <= this.b);
        }
        return Rect;
    })();


    var deConfig = {
        x: 100,
        y: 100,
        off: {
            xv: 5,
            yv: 2,
            xav: 0,
            yav: 0,
        },
        isLongTail: false
    };
    var config = deConfig;

    var ball = {
        x: deConfig.x,
        y: deConfig.y,
        vx: deConfig.off.xv,
        vy: deConfig.off.yv,
        radius: 25,
        color: 'blue',
        draw: function () {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
            ctx.closePath();
            ctx.fillStyle = this.color;
            ctx.fill();
        }
    };

    function draw() {
        //长尾如何绘制？绘制半透明背景即可。多次半透明，小球轨迹逐渐被遮掩，颜色越来越浅，最终不可见
        if (config.isLongTail) {
            ctx.fillStyle = 'rgba(255,255,255,0.3)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        } else {
            // ctx.fillStyle = 'rgba(255,255,255,0.3)';
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

        ball.draw();
        ball.x += ball.vx;
        ball.y += ball.vy;

        //加速度，速度随着循环次数（时间）增加或减小
        ball.vx += config.off.xav;//逐渐降低或增加
        // ball.vy += 0.25;
        ball.vy += config.off.yav;


        //越界检测。反转运动路径
        if (ball.y + ball.radius > canvas.height) {
            ball.vy = -Math.abs(ball.vy);
        }
        if (ball.y - ball.radius < 0) {
            ball.vy = Math.abs(ball.vy);
        }
        if (ball.x + ball.radius > canvas.width) {
            ball.vx = -Math.abs(ball.vx);
        }
        if (ball.x - ball.radius < 0) {
            ball.vx = Math.abs(ball.vx);
        }

        raf = window.requestAnimationFrame(draw);
    }

    function startRunClick(e) {
        isRuning = true;
        raf = window.requestAnimationFrame(draw);
        console.log(raf);
    }

    function pauseRunClick(e) {
        window.cancelAnimationFrame(raf);
    }

    function okConfClick(event) {
        config = {
            x: parseInt(xInput.value),
            y: parseInt(yInput.value),
            off: {
                xv: parseFloat(xVInput.value),
                yv: parseFloat(yVInput.value),
                xav: parseFloat(xAVInput.value),
                yav: parseFloat(yAVInput.value),
            },
            isLongTail: longTailInput.checked
        }

        ball.x = config.x;
        ball.y = config.y
        ball.vx = config.off.xv;
        ball.vy = config.off.yv;

        console.log(config);
    }

    function init() {
        xInput.value = deConfig.x;
        yInput.value = deConfig.y;
        xVInput.value = deConfig.off.xv;
        yVInput.value = deConfig.off.yv;
        xAVInput.value = deConfig.off.xav;
        yAVInput.value = deConfig.off.yav;
        longTailInput.checked = deConfig.isLongTail;
        ball.draw();
    }

    init();

</script>

</body>
</html>